<!doctype html>
<!--[if lt IE 8 ]><html lang="en" class="no-js ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie"><![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>Constellation Admin Skin</title>
	<meta name="description" content="Constellation Admin Skin demo website: check all the features of this awesome admin skin!">
	<meta name="author" content="Display:inline">
	
	<!-- Global stylesheets -->
	<link href="css/reset.css" rel="stylesheet" type="text/css">
	<link href="css/screen.css" rel="stylesheet" type="text/css">
	<!--[if lt IE 7]><link href="css/screen-ie6.css" rel="stylesheet" type="text/css"><![endif]-->
	<link href="css/shadowbox.css" rel="stylesheet" type="text/css">
	
	<!-- Favicon -->
	<link rel="shortcut icon" type="image/x-icon" href="favicon.html">
	<link rel="icon" type="image/png" href="favicon-large.png">
	
	<!-- Modernizr for support detection -->
	<script src="js/modernizr.custom.min.js"></script>
	
</head>

<body>
	
	<h1>Constellation Admin Skin</h1>
	
	<header>
		<ul>
			<li>Fluid or fixed layout</li>
			<li>47+ elements styles</li>
			<li>jQuery powered</li>
			<li>Login and error pages</li>
			<li>Ready to use scripts</li>
			<li>Mobile version</li>
			<li>Highly Detailled doc</li>
		</ul>
		<a href="#pages" id="pages-jump" title="Demo pages of the standard version">
			<img src="images/screenshots/full1.jpg" width="482" height="260">
			<img src="images/screenshots/full2.jpg" width="482" height="260">
			<img src="images/screenshots/full3.jpg" width="482" height="260">
			<img src="images/screenshots/full4.jpg" width="482" height="260">
			<img src="images/screenshots/full5.jpg" width="482" height="260">
			<img src="images/screenshots/full6.jpg" width="482" height="260">
		</a>
		
		<a href="http://themeforest.net/item/constellation-complete-admin-skin/116461?ref=displayinline" id="buy" title="Click here to go to ThemeForest item page">Buy on ThemeForest</a>
		
		<div id="iphone"></div>
		<a href="#mobile" id="mobile-jump" title="Demo pages of the mobile version">
			<img src="images/screenshots/mid1.jpg" width="120" height="158">
			<img src="images/screenshots/mid2.jpg" width="120" height="157">
			<img src="images/screenshots/mid3.jpg" width="120" height="157">
			<img src="images/screenshots/mid4.jpg" width="120" height="195">
			<img src="images/screenshots/mid5.jpg" width="120" height="158">
			<img src="images/screenshots/mid6.jpg" width="120" height="164">
		</a>
	</header>
	
	<article>
		
		<aside>
			<ul>
				<li>
					<span>47</span>
					<strong>elements styles</strong><br>
					with multiple variations
				</li>
				<li>
					<span>2</span>
					<strong>template versions</strong><br>
					screen &amp; mobile
				</li>
				<li>
					<span>2</span>
					<strong>background tints</strong><br>
					light &amp; dark
				</li>
				<li>
					<span>6</span>
					<strong>template PSD files</strong><br>
					including slices &amp; favicon
				</li>
				<li>
					<span>3</span>
					<strong>backend satellite pages</strong><br>
					login, error &amp; error report
				</li>
				<li>
					<span>6</span>
					<strong>custom error documents</strong><br>
					403, 404, 500 &amp; more
				</li>
			</ul>
		</aside>
		
		<section>
			<div class="top"></div>
			<h2><span>Features</span></h2>
			
			<ul class="bullet-list with-post-it">
				<li>HTML5 &amp; CSS3 markup</li>
				<li>Fluid or fixed layout, based on 960 grid system</li>
				<li>40+ elements styles, with multiple variations</li>
				<li>jQuery powered, but fully fonctional even if JS is disabled</li>
				<li>Satellite backend pages are provided: login, error with report sending, 404's...</li>
				<li>Mobile version included (for webkit-based mobile browsers: iPhone, Android...), compatible with main template content styles</li>
				<li>All elements are fluid (sizes are in EMs): resize just by adding a class</li>
				<li>Detailled documentation with complete styles and functions references</li>
			</ul>
			
			<div class="post-it">
				<div>
					<h3><strong>Bonus</strong><br>pages</h3>
					<p><a href="template/old-browsers.html">Old browsers <br>detection &raquo;</a></p>
					<p>Custom error documents:<br>
					<a href="template/errorDoc1d2b.html?code=400" title="Bad request">400</a>, <a href="template/errorDoc9b6d.html?code=401" title="Unauthorized">401</a>, <a href="template/errorDocb629.html?code=403" title="Forbidden">403</a>, <a href="template/errorDoc669b.html?code=404" title="Page not found">404</a>,<br>
					<a href="template/errorDoced08.html?code=500" title="Internal server error">500</a>, <a href="template/errorDoc7308.html?code=503" title="Service Unavailable">503</a></p>
				</div>
			</div>
			
			<div class="bottom"></div>
		</section>
		
		<section id="pages">
			<div class="top"></div>
			<h2><span>Example pages</span></h2>
			
			<ul class="icon-list">
			
				<li><a href="template/login.html">
					<span class="icon" style="background-image: url(images/web-app/Exit.png);"></span>
					Login<br>
					<small>with ajax script</small>
				</a></li>
			
				<li><a href="template/wizard.html">
					<span class="icon" style="background-image: url(images/web-app/Next.png);"></span>
					Wizard<br>
					<small>example setup</small>
				</a></li>
			
				<li><a href="template/error.html">
					<span class="icon" style="background-image: url(images/web-app/Warning.png);"></span>
					Error<br>
					<small>+ reporting</small>
				</a></li>
			</ul>
			
			<div class="separator"></div>
			
			<ul class="icon-list">
			
				<li><a href="template/dashboard.html">
					<span class="icon" style="background-image: url(images/web-app/Bar-Chart.png);"></span>
					Dashboard<br>
					<small>Fav &amp; stats</small>
				</a></li>
			
				<li><a href="template/planning.html">
					<span class="icon" style="background-image: url(images/web-app/Line-Chart.png);"></span>
					Planning<br>
					<small>Users timeline</small>
				</a></li>
			
				<li><a href="template/forms.html">
					<span class="icon" style="background-image: url(images/web-app/Modify.png);"></span>
					Forms<br>
					<small>simple &amp; full</small>
				</a></li>
			
				<li><a href="template/table.html">
					<span class="icon" style="background-image: url(images/web-app/Save.png);"></span>
					Table<br>
					<small>+ grid view</small>
				</a></li>
			
				<li><a href="template/explorer.html">
					<span class="icon" style="background-image: url(images/web-app/Loading.png);"></span>
					Explorer<br>
					<small>Full featured</small>
				</a></li>
			
				<li><a href="template/calendars.html">
					<span class="icon" style="background-image: url(images/web-app/Line-Chart.png);"></span>
					Calendars<br>
					<small>5 styles</small>
				</a></li>
			
				<li><a href="template/tasks.html">
					<span class="icon" style="background-image: url(images/web-app/Add.png);"></span>
					Tasks<br>
					<small>&amp; blocks</small>
				</a></li>
			
				<li><a href="template/lists.html">
					<span class="icon" style="background-image: url(images/web-app/Modify.png);"></span>
					Lists<br>
					<small>with icons</small>
				</a></li>
			
				<li><a href="template/help.html">
					<span class="icon" style="background-image: url(images/web-app/Info.png);"></span>
					Help<br>
					<small>+ accordion</small>
				</a></li>
			
				<li><a href="template/gallery.html">
					<span class="icon" style="background-image: url(images/web-app/Picture.png);"></span>
					Wizard<br>
					<small>+ gallery</small>
				</a></li>
			
				<li><a href="template/dark-bg.html">
					<span class="icon" style="background-image: url(images/web-app/Loading.png);"></span>
					Dark BG<br>
					<small>alternate style</small>
				</a></li>
			
				<li><a href="template/index-alt.html">
					<span class="icon" style="background-image: url(images/web-app/Bar-Chart.png);"></span>
					Alt nav<br>
					<small>no big icons</small>
				</a></li>
			</ul>
			
			<a class="encart" href="template/index.html">
				<strong>Hey, I want to see it all at once!</strong> (caution: heavy page!)			</a>
			
			<div class="bottom"></div>
		</section>
		
		<section id="mobile">
			<div class="top"></div>
			<h2><span>Mobile pages</span></h2>
			
			<a href="mobile.html" class="encart left-encart">
				<img src="images/iphone.jpg" width="80" height="147"><br>
				<strong>Click for mobile version demo</strong>
			</a>
			
			<ul class="gallery with-left-encart">
				<li><a href="images/screenshots/screen1.jpg" rel="shadowbox[Mobile]" title="Dashboard"><img src="images/screenshots/mini1.jpg" width="64" height="71"></a></li>
				<li><a href="images/screenshots/screen2.jpg" rel="shadowbox[Mobile]" title="Multi-level menu"><img src="images/screenshots/mini2.jpg" width="64" height="71"></a></li>
				<li><a href="images/screenshots/screen3.jpg" rel="shadowbox[Mobile]" title="Login"><img src="images/screenshots/mini3.jpg" width="64" height="71"></a></li>
				<li><a href="images/screenshots/screen4.jpg" rel="shadowbox[Mobile]" title="Favorites"><img src="images/screenshots/mini4.jpg" width="64" height="71"></a></li>
				<li><a href="images/screenshots/screen5.jpg" rel="shadowbox[Mobile]" title="Use any template style"><img src="images/screenshots/mini5.jpg" width="64" height="71"></a></li>
				<li><a href="images/screenshots/screen6.jpg" rel="shadowbox[Mobile]" title="Table"><img src="images/screenshots/mini6.jpg" width="64" height="71"></a></li>
			</ul>
			
			<div class="bottom"></div>
		</section>
		
	</article>
	
	<footer>
	
		<p>&copy; Copyright <a href="http://themeforest.net/user/displayinline">Display:inline</a> 2010 / Monitor by <a href="http://www.psdgraphics.com/graphics/photoshop-recreation-of-samsung-p2370-computer-monitor/">PSD graphics</a> / Icons: Web Application Icon Set - Copyright © WebAppers.com</p>
	
	</footer>
	
	<!-- Generic libs -->
	<script src="js/jquery-1.6.3.min.js"></script>
	<script src="js/shadowbox.js"></script>
	
	<script>
	
		Shadowbox.init({
			overlayOpacity: 0.75
		});
		
		$(document).ready(function()
		{
			$('a[href^=#]').live('click', function(event)
			{
				event.preventDefault();
				$('html, body').animate({scrollTop:$('#'+$(this).attr('href').substring(1)).offset().top});
			});
			
			$('#pages-jump img, #mobile-jump img').addClass('animated').not(':first-child').hide();
			
			function slideShow()
			{
				$('#pages-jump, #mobile-jump').nextSlide();
			}
			
			setInterval(slideShow, 4000);
		});
		
		$.fn.nextSlide = function()
		{
			this.each(function()
			{
				var current = $(this).children('img:visible');
				var next = current.next();
				if (next.length == 0)
				{
					next = $(this).children('img:first');
				}
				
				current.fadeOut('slow');
				next.fadeIn('normal');
			});
		}
	
	</script>
	
	<script>
	
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-10643639-3']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>
</body>
</html>